<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div id="app" class="user">
        <div class="userNav commenNav">
            <div>
                <div :class="{iconImg:isiconImg,iconImgs:isiconImgs}" @click="pillpage"></div>
                <div id="pillmanage" @click="pillpage" style="cursor: pointer">药品管理</div>
                <div class="breadcrum"></div>
                <div>药品信息</div>
            </div>
            <div class="userNavT">
                <div>
                    <input type="text" placeholder="输入药品名称开始搜索">
                    <div @click="searchfn"><img :src="searchImg" alt=""></div>
                </div>
            </div>
        </div>
        <div class="userCotent">
            <div class="basicInfo">
                <div>
                    <div><span style="float:left;color:#999;">基本信息</span><span style="float:right">药品通用名称：</span></div>
                    <div><input disabled="true" v-model="pillname" type="text" style="width:320px;"></div>
                </div>
                <div>
                    <div><span>药品有效期：</span></div>
                    <div><input disabled="true" v-model="expiryDate" type="text" style="width:320px;"></div>
                </div>
                <div>
                    <div><span>药品有效期单位：</span></div>
                    <div>
                        <div class="selectPickBox1">
                            <el-select :disabled="true" v-model="selectDateunit" placeholder="请选择">
                                <el-option v-for="(option,index) in Dateunitoptions" :label="option.text" :value="option.value" :key="aa">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div>
                    <div><span>剂型：</span></div>
                    <div>
                        <div class="selectPickBox1">
                            <el-select :disabled="true" v-model="selectpillType" placeholder="请选择">
                                <el-option v-for="(option,index) in pillTypeoptions" :label="option.text" :value="option.value" :key="aa">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div>
                    <div><span>批准文号：</span></div>
                    <div><input disabled="true" type="text" v-model="liceneNumber"></div>
                </div>
                <div>
                    <div><span>批准文号有效期：</span></div>
                    <div>
                        <input type="text" v-model="approvalNumValidity" disabled="true">
                        <span style="margin:0 10px;float:right;line-height: 32px;">月</span>
                    </div>
                </div>
                <div>
                    <div><span>生产地址：</span></div>
                    <div>
                        <div class="selectPickBox1">
                            <el-select :disabled="true" v-model="selectsite" placeholder="请选择">
                                <el-option v-for="(option,index) in site" :label="option.text" :value="option.value" :key="aa">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="basicInfo pillrule">
                <div>
                    <div><span style="float:left;color:#999;">药品规格</span><span style="float:right">药品通用名称：</span></div>
                    <div><input disabled="true" type="text" style="width:320px;" v-model="pillname"></div>
                </div>
                <div>
                    <div><span>最小赋码包装单位：</span></div>
                    <div>
                        <div class="selectPickBox1">
                            <el-select :disabled="true" v-model="selectcodeUnit" placeholder="请选择">
                                <el-option v-for="(option,index) in codeUnit" :label="option.text" :value="option.value" :key="aa">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div>
                    <div><span>最小赋码包装内置剂数量：</span></div>
                    <div><input disabled="true" type="text" v-model="minCodeNumber"></div>
                </div>
                <div>
                    <div><span>制剂单位：</span></div>
                    <div>
                        <div class="selectPickBox1">
                            <el-select :disabled="true" v-model="selectpillUnit" placeholder="请选择">
                                <el-option v-for="(option,index) in pillUnit" :label="option.text" :value="option.value" :key="aa">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div>
                    <div><span>制剂规格：</span></div>
                    <div><input disabled="true" type="text" v-model="specificationString"></div>
                </div>
                <div>
                    <div><span>包装级别：</span></div>
                    <div>
                        <div class="selectPickBox1">
                            <el-select :disabled="true" v-model="selectpackLevel" placeholder="请选择">
                                <el-option v-for="(option,index) in packLevel" :label="option.text" :value="option.value" :key="aa">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div>
                    <div><span>药品本位码：</span></div>
                    <div><input disabled="true" type="text" v-model="pillStandardCode"></div>
                </div>
            </div>
        </div>
    </div>
    </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex'
    export default {
        name: 'user',
        data() {
            return {
                aa: '',
                editData: '',
                pilladd: true,
                pilledit: false,
                pillStandardCode: '',
                specificationString: '',
                minCodeNumber: '',
                liceneNumber: '',
                liceneEndTime: '',
                liceneStartTime: '',
                pillname: '',
                expiryDate: '',
                approvalNumValidity:'',
                isiconImg: true,
                isiconImgs: false,
                searchImg: '/static/img/搜索.png',
                searchImgs: '/static/img/搜索点击.png',
                users: [],
                // loading: true,、
                selectDateunit: 'year',
                Dateunitoptions: [{
                        text: '年',
                        value: 'year'
                    },
                    {
                        text: '月',
                        value: 'month'
                    },
                    {
                        text: '日',
                        value: 'day'
                    },
                ],
                selectpillType: '1',
                pillTypeoptions: [
                { text: '颗粒剂', value: '1' },
                { text: '片剂', value: '2' },
                { text: '胶囊剂', value: '3' },
                { text: '软胶囊剂', value: '4' },
                { text: '合剂', value: '5' },
                { text: '糖浆剂', value: '6' },
                { text: '注射剂', value: '7' },
                { text: '软膏剂', value: '8' },

                { text: '眼用制剂', value: '9' },
                { text: '鼻用制剂', value: '10' },
                { text: '栓剂', value: '11' },
                { text: '丸剂', value: '12' },
                { text: '乳膏剂', value: '13' },
                { text: '糊剂', value: '14' },
                { text: '吸入制剂', value: '15' },
                { text: '喷雾剂', value: '16' },
                { text: '气雾剂', value: '17' },
                { text: '凝胶剂', value: '18' },
                { text: '散剂', value: '19' },
                { text: '搽剂', value: '20' },
                { text: '涂剂', value: '21' },
                { text: '涂膜剂', value: '22' },
                { text: '酊剂', value: '23' },
                { text: '贴剂', value: '24' },
                { text: '贴膏剂', value: '25' },
                { text: '口服溶液剂', value: '26' },
                { text: '口服混悬剂', value: '27' },
                { text: '口服乳剂', value: '28' },
                { text: '植入剂', value: '29' },
                { text: '膜剂', value: '30' },
                { text: '耳用制剂', value: '31' },
                { text: '洗剂', value: '32' },
                { text: '冲洗剂', value: '33' },
                { text: '灌肠剂', value: '34' },
                { text: '锭剂', value: '35' },
                { text: '煎膏剂', value: '36' },
                { text: '胶剂', value: '37' },
                { text: '酒剂', value: '38' },
                { text: '膏药', value: '39' },
                { text: '露剂', value: '40' },
                { text: '茶剂', value: '41' },
                { text: '流浸膏剂与浸膏剂', value: '42' },
                ],
                selectsite: '1',
                site: [{
                    text: '请选择',
                    value: '1'
                }, ],
                selectcodeUnit: '1',
                codeUnit: [{
                        text: '盒',
                        value: '1'
                    },
                    {
                        text: '袋',
                        value: '2'
                    },
                    {
                        text: '箱',
                        value: '3'
                    },
                ],
                selectpillUnit: '1',
                pillUnit: [{
                        text: '片',
                        value: '1'
                    },
                    {
                        text: '袋',
                        value: '2'
                    },
                    {
                        text: '粒',
                        value: '3'
                    },
                    {
                        text: '瓶',
                        value: '4'
                    },
                    {
                        text: '支',
                        value: '5'
                    },
                ],
                selectpackLevel: '1',
                packLevel: [{
                        text: '1',
                        value: '1'
                    },
                    {
                        text: '2',
                        value: '2'
                    },
                    {
                        text: '3',
                        value: '3'
                    },
                ],
                produceAddresslist: [],
            }
        },
        filters: {
        },
        created: function() {
            // 获取生产地址
            this.produceAddresslist = JSON.parse(sessionStorage.ProduceAddress)
            for (let i = 0; i < this.produceAddresslist.length; i++) {
                this.site.push({
                    "text": this.produceAddresslist[i].address,
                    "value": this.produceAddresslist[i].id
                })
            }
            this.editData = JSON.parse(sessionStorage.edata)
            console.log(this.editData)
            this.pillname = this.editData.drugInfo.drugName
            this.selectDateunit = this.editData.drugInfo.drugIndateUnit
            this.expiryDate = this.editData.drugInfo.drugIndate
            this.selectpillType = this.editData.drugInfo.dosageForm
            console.log(this.site)
            this.liceneNumber = this.editData.drugInfo.approvalNumber
            this.approvalNumValidity = this.editData.drugInfo.approvalNumValidity
            this.selectcodeUnit = this.editData.drugInfo.minPackagingUnit
            this.minCodeNumber = this.editData.drugInfo.minPackagingNumber
            this.selectpillUnit = this.editData.drugInfo.specificationUnit
            this.specificationString = this.editData.drugInfo.specificationString
            this.selectpackLevel = this.editData.drugInfo.packingLevel
            this.pillStandardCode = this.editData.drugInfo.drugCode
            this.id = this.editData.drugInfo.id
            for (var i = 0; i < this.site.length; i++) {
                if (this.site[i].value == this.editData.drugInfo.produceAddressId) {
                    this.selectsite = this.editData.drugInfo.produceAddressId
                    return this.adre = true
                }
                this.adre = false
            }
            if (this.adre == false) {
                this.site.push({
                    "text": this.editData.productionAddress.address,
                    "value": this.editData.drugInfo.produceAddressId
                })
            }
            this.selectsite = this.editData.drugInfo.produceAddressId
        },
        methods: {
            pillpage: function() {
                this.isiconImg = false
                this.isiconImgs = true
                document.querySelector("#pillmanage").style.color = '#666'
                this.$router.push({
                    path: '/home/pillmanage'
                })
            },
            searchfn: function() {
                this.searchImg = this.searchImgs
            },
            ...mapActions([''])
        },
    }
</script>
<style scoped>
    .userCotent {
        margin-top: 10px;
        /*min-width: 1289px;*/
        background: #fff;
        width: 100%;
        height: calc(100vh - 150px);
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .userCotent>div {
        padding: 30px 0 30px 40px;
        border-bottom: 1px solid #DDD;
    }
    .userCotent>div:nth-child(3) {
        border-bottom: none;
    }
    .userCotent>div>div>div {
        float: left
    }
    .userCotent input {
        width: 160px;
        height: 32px;
        border: 1px solid #DDD;
        border-radius: 5px;
        background: #fff;
    }
    .userNav>div:nth-child(1) {
        height: 25px;
        display: flex;
        margin-left: 35px;
        align-items: center;
    }
    .userNav>div:nth-child(1) input {
        background: #43dce7;
        border-radius: 5px;
        font-size: 14px;
        color: #fff;
        margin-left: 60px;
        width: 80px;
        height: 32px;
    }
    .userNav>div:nth-child(1) div {
        line-height: 25px;
        margin-left: 5px;
        padding: 0;
        color: #333;
        font-size: 14px;
    }
    .userNavT {
        width: 360px;
        display: flex;
        align-items: center;
        margin-right: 45px;
    }
    .userNavT>div:nth-child(1) {
        display: flex;
        border: 1px solid #e0e0e0;
        border-radius: 5px;
        height: 34px;
        padding: 5px 10px;
        width: 360px;
        justify-content: space-between;
    }
    .userNavT>div:nth-child(1) input {
        border: none;
        outline: none;
        width: 100%;
        color: #333;
        font-size: 14px;
    }
    .userNavT>div:nth-child(1) img {
        width: 20px;
        height: 20px;
    }
    .userNavT>div:nth-child(1) div {
        line-height: 25px;
        margin-left: 5px;
        padding: 0;
        color: #333;
        font-size: 14px;
    }
    .userNavT>div:nth-child(1) div span {
        padding: 0!important;
    }
    .userNavT>div:nth-child(2) {
        color: #888;
        font-size: 14px;
        cursor: pointer;
    }
    .user {
        position: relative;
    }
    input::-webkit-input-placeholder {
        color: #CCCCCC;
        font-size: 14px
    }
    input:-moz-placeholder {
        color: #CCCCCC;
        font-size: 14px
    }
    input::-moz-placeholder {
        color: #CCCCCC;
        font-size: 14px
    }
    input:-ms-input-placeholder {
        color: #CCCCCC;
        font-size: 14px
    }
    .iconImg {
        background: url('/static/img/icons.png') no-repeat;
        width: 24px;
        height: 24px;
        background-position: -79px -39px;
    }
    .iconImgs {
        background: url('/static/img/icons.png') no-repeat;
        width: 24px;
        height: 24px;
        background-position: -108px -39px;
    }
    .datails {
        border: 1px solid #dddddd;
        width: 100%;
        background: #fff;
        /*min-width: 1289px;*/
    }
    .basicInfo>div {
        margin: 20px 0;
        overflow: hidden;
    }
    .basicInfo>div div:nth-child(1) {
        width: 280px;
        height: 32px;
        line-height: 32px;
    }
    .basicInfo>div div:nth-child(1) span {
        float: right;
        color: #333;
    }
    .basicInfo>div div:nth-child(2) input {
        padding: 0 10px;
        margin-left: 40px;
    }
    .userCotent>div:nth-child(3) input[type="button"] {
        width: 150px;
        color: #fff;
        background: #43dce7;
        border-radius: 5px;
        margin-left: 330px;
    }
    .el-input__inner {
        border: 1px solid #DDD!important;
    }
    select {
        width: 160px;
        border: 1px solid #DDD;
        height: 32px;
        border-radius: 5px;
        margin-left: 40px;
    }
    .breadcrum {
        background: url(/static/img/icons.png) no-repeat;
        width: 25px;
        height: 25px;
        background-position: -138px -39px;
    }
    .selectPickBox1 {
        width: 160px!important;
    }
    .selectPickBox1 {
        height: 32px;
        overflow: hidden;
        position: relative;
        border: 1px solid #dddddd;
        border-radius: 5px;
        margin-left: 40px;
    }
    .selectPickBox1 .el-select {
        width: 162px!important;
        margin-left: -1px;
        margin-top: -1px;
    }
</style>